<!DOCTYPE html>
<#assign pg=JspTaglibs['http://jsptags.com/tags/navigation/pager'] pageEncoding="UTF-8"/>
<#assign ctx=request.contextPath /> 
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8" />
		<title>我的行程</title>
		<link rel="stylesheet" href="${ctx}/assets/css/alwayspointstyle.css" />
        <link href="//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="content">
			<div class="raise" id="head" style="display:block;">
				<div class="head_sculpture">
					<img <#if order.employPhoto??>src="${order.employPhoto}<#else>src="${ctx}/assets/img/alwayspoint/zc_tx.png</#if>" alt="司机头像"/>
					<div style="padding:1px;border-radius: 4px;font-size: 8px;border: 1px solid #e9e9e9;position: absolute;background-color:#fff;top: 6.2em;left: 5em;color: black;">司机</div>
					<div class="head_news">
						<p><span>${driver.name}</span> <span>（${driver.username}）</span> </p>
						<p class="head_news_mag"><span>${order.carName}</span> <span>${order.carNumber}</span></p>
					</div>
				</div>
			</div>
			
			<div id="allmap" class="map">
			
			</div>
		</div>
	</body>
    <script type="text/javascript" src="${ctx}/assets/js/jquery-1.8.3.min.js" ></script>
	<script type="text/javascript">
	
		
	
	$(document).ready(function(){
	   var orderzhuan = null; 
		var distance;//司机距离终点距离
		var timeStr;//司机距离终点时间
		var zdlabel;
		window.daijia = {ctx : '${ctx}'};
		var ctx=window.daijia.ctx; 
		if(${order.status}==5 || ${order.status}==6){
			window.location=ctx+"/passenger/api/rest/v4/point/twocode";
		}
		
	
	
	
	  
		
	   $(function(){
	   // 百度地图API功能
		var map = new BMap.Map("allmap");    // 创建Map实例
		map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP ]}));
			var ctrl = new BMapLib.TrafficControl({
	        showPanel: true //是否显示路况提示面板
	    });
	    map.addControl(ctrl);
	    ctrl.setAnchor(BMAP_ANCHOR_TOP_LEFT);
		$.get(ctx+"/passenger/api/rest/v4/point/findOneZhuan",{"id":${order.id}},function(result){
			orderzhuan = result;
		var start = new BMap.Point(orderzhuan.startLng, orderzhuan.startLat);
		var end = null;
		var plan;
		var carpoint;//司机地点
		var carmarker2;
		var carlabel;
		var qdlabel;
		
		
		
		
        
        
       
        var label;
        var carpt;//车
        carpt = new BMap.Point(orderzhuan.startLng, orderzhuan.startLat);
        
        var flag = true;
        
        car();
        
        window.setInterval(function(){car()},5*1000);
        window.setInterval(function(){orderstatus()},60*1000);
        function orderstatus(){
        	$.ajax({
		        url : ctx+'/passenger/api/rest/v4/point/findOneZhuan',
		        type:'GET',
		        async:true,
		        dataType : 'json',
		        data : {
		        	"id":${order.id}
		        },
		        success : function(result){
		        	if(result.status==5 || result.status==6){
						window.location=ctx+"/passenger/api/rest/v4/point/twocode";
					}
		        
		        }
		      });
        
        
        }
        function car(){
        
        
        	 map.clearOverlays();
        	 console.debug(qdlabel);
        	 console.debug(zdlabel);
        	 
        	 
           if(flag){
              flag = false;
               $.ajax({
		        url : ctx+'/passenger/api/rest/v4/point/findOneDriver',
		        type:'GET',
		        async:true,
		        dataType : 'json',
		        data : {
		        	"driverId":${order.employId}
		        },
		        success : function(result){
		        flag = true;
			        	if(result.lastLatitude!=null && result.lastLongitude!=null){
				        	carpt = new BMap.Point(result.lastLongitude, result.lastLatitude);//车
				        	
				        	carpoint = new BMap.Point(result.lastLongitude, result.lastLatitude);
					        
				        }else{
				        	carpt = new BMap.Point(result.longitude, result.latitude);//车
				        	
				        	carpoint = new BMap.Point(result.longitude, result.latitude);
				        }
				        
				        
				        
						map.enableScrollWheelZoom(true); 
							
							
							if(null!=orderzhuan.endLng && null!=orderzhuan.endLat && orderzhuan.endLng!=0 && orderzhuan.endLat!=0 && orderzhuan.endLng!=0.0 && orderzhuan.endLat!=0.0){
			end = new BMap.Point(orderzhuan.endLng, orderzhuan.endLat);
			
		
				var driving = new BMap.DrivingRoute(map, {
						policy : BMAP_DRIVING_POLICY_LEAST_DISTANCE,
						onSearchComplete: function(results){
							if (driving.getStatus() == BMAP_STATUS_SUCCESS){ 
							 // 获取第一条方案   
							 plan = results.getPlan(0).getRoute(0).getPath();
							   var polyline = new BMap.Polyline(plan,{strokeColor:"#3366ff",strokeWeight:2});
							 	
							   
							    map.addOverlay(polyline); 
							}
						}
					});
				
				driving.search(start, end);
		
		}else{
		//	map.centerAndZoom(new BMap.Point(orderzhuan.startLng, orderzhuan.startLat), 20);
		}
						
				        
							var drivingCar = new BMap.DrivingRoute(map, {
							policy : BMAP_DRIVING_POLICY_LEAST_DISTANCE,
							onSearchComplete: function(results){
								if (drivingCar.getStatus() == BMAP_STATUS_SUCCESS){ 
								 // 获取第一条方案   
								   	distance=results.getPlan(0).getDistance();
								 	timeStr=results.getPlan(0).getDuration();
								 	map.setViewport(results.getPlan(0).getRoute(0).getPath()); //最佳视距
								 
								 //司机
								var opts;
								if(null!=orderzhuan.endLng && null!=orderzhuan.endLat && orderzhuan.endLng!=0 && orderzhuan.endLat!=0 && orderzhuan.endLng!=0.0 && orderzhuan.endLat!=0.0){
									opts = {
											  position : carpt,    // 指定文本标注所在的地理位置
											  offset   : new BMap.Size(8, -25)    //设置文本偏移量
											}
									label = new BMap.Label("距离终点<span style='color:#fe7038;'>"+distance+"</span><br/>预计大约<span style='color:#fe7038;'>"+timeStr+"</span>", opts);  // 创建文本标注对象
									label.setStyle({
										 color : "#5a5a5a",
										 fontSize : "12px",
										 height : "40px",
										 lineHeight : "20px",
										 fontFamily:"微软雅黑",
										 border:"none",
										 padding:"0.1rem 0.4rem",
										 borderRadius:"0.4rem"
									 });
								
								}else{
								opts = {
										  position : carpt,    // 指定文本标注所在的地理位置
										  offset   : new BMap.Size(8, -20)    //设置文本偏移量
										}
									label = new BMap.Label("距离起点<span style='color:#fe7038;'>"+distance, opts);  // 创建文本标注对象
									label.setStyle({
										 color : "#5a5a5a",
										 fontSize : "12px",
										 height : "20px",
										 lineHeight : "20px",
										 fontFamily:"微软雅黑",
										 border:"none",
										 padding:"0.1rem 0.4rem",
										 borderRadius:"0.4rem"
									 });
								}
								
								
								
								map.addOverlay(label); 
								
								
								 var qdFlag = false;
									var qdpt = new BMap.Point(orderzhuan.startLng, orderzhuan.startLat);//起点坐标
									var qdIcon = new BMap.Icon(ctx+"/assets/img/alwayspoint/zc_qd.png", new BMap.Size(21,29));
									qdIcon.setImageSize(new BMap.Size(18,29));	                                       
									var qdmarker2 = new BMap.Marker(qdpt,{icon:qdIcon}); 
							        map.addOverlay(qdmarker2);
							        var qdopts = {
									  position : qdpt,    // 指定文本标注所在的地理位置
									  offset   : new BMap.Size(-50, -45)    //设置文本偏移量
									}
									var qdlabel = new BMap.Label(orderzhuan.startAddress, qdopts);  // 创建文本标注对象
										qdlabel.setStyle({
											 color : "#5a5a5a",
											 fontSize : "12px",
											 height : "20px",
											 lineHeight : "20px",
											 fontFamily:"微软雅黑",
											 border:"none",
											 display:"none",
											 padding:"0.2rem 0.4rem",
											 borderRadius:"0.4rem"
										 });
									map.addOverlay(qdlabel); 
									qdmarker2.addEventListener("click", function(){ 
										if(!qdFlag){
											qdlabel.setStyle({
											 display:"block"
											
										    });
										    qdFlag = true;
										}else{
											qdlabel.setStyle({
											 display:"none"
										    });
										    qdFlag = false;
										}
											
									});
								
								
								map.addOverlay(qdlabel); 
								
								
								if(null!=orderzhuan.endLng && null!=orderzhuan.endLat && orderzhuan.endLng!=0 && orderzhuan.endLat!=0 && orderzhuan.endLng!=0.0 && orderzhuan.endLat!=0.0){
       	 
							        var zdFlag = false;
							        var zdpt = new BMap.Point(orderzhuan.endLng, orderzhuan.endLat);//终点
									var zdIcon = new BMap.Icon(ctx+"/assets/img/alwayspoint/zc_zd.png", new BMap.Size(21,29));
									zdIcon.setImageSize(new BMap.Size(18,29));
									var zdmarker2 = new BMap.Marker(zdpt,{icon:zdIcon}); 
							        map.addOverlay(zdmarker2);
							        //终点
									var zdopts = {
									  position : zdpt,    // 指定文本标注所在的地理位置
									  offset   : new BMap.Size(-50, -45)    //设置文本偏移量
									}
									 zdlabel = new BMap.Label(orderzhuan.endAddress, zdopts);  // 创建文本标注对象
										zdlabel.setStyle({
											color : "#5a5a5a",
											 fontSize : "12px",
											 height : "20px",
											 lineHeight : "20px",
											 fontFamily:"微软雅黑",
											 border:"none",
											 display:"none",
											 padding:"0.2rem 0.4rem",
											 borderRadius:"0.4rem"
											
										 });
									map.addOverlay(zdlabel); 
									zdmarker2.addEventListener("click", function(){ 
										if(!zdFlag){
											zdlabel.setStyle({
											 display:"block"
											
										    });
										    zdFlag = true;
										}else{
											zdlabel.setStyle({
											 display:"none"
										    });
										    zdFlag = false;
										}
											
									});
						        
						        }
								
								
	
									
									
									
								 	
								   
								}
							}
							
						});
				if(null!=orderzhuan.endLng && null!=orderzhuan.endLat && orderzhuan.endLng!=0 && orderzhuan.endLat!=0 && orderzhuan.endLng!=0.0 && orderzhuan.endLat!=0.0){
					drivingCar.search(carpoint, end);
				}else{
					drivingCar.search(carpoint, start);
				}
				      
       			var carIcon = new BMap.Icon(ctx+"/assets/img/alwayspoint/zc_sj.png", new BMap.Size(20,37));
				carIcon.setImageSize(new BMap.Size(20,30));
				carmarker2 = new BMap.Marker(carpt,{icon:carIcon}); 
		        map.addOverlay(carmarker2);
				map.removeOverlay(label); 
				carmarker2.setPosition(carpt);
				
        
        
    
    
    
    
    
    
		            
		        },
		        error:function(){
		            flag = true;
		        }
			});
            }
	       
        }
        
			})

            


            var temp = $("#head").css("display");
            if(temp=="none"){
                $("#allmap").css("width",window.innerWidth);
                $("#allmap").css("height",window.innerHeight-75);
            }else{
                $("#allmap").css("width",window.innerWidth);
                $("#allmap").css("height",window.innerHeight-67);
            }

            window.onresize = function(event){
                if(temp=="none"){
                    $("#allmap").css("width",window.innerWidth);
                    $("#allmap").css("height",window.innerHeight-75);
                }else{
                    $("#allmap").css("width",window.innerWidth);
                    $("#allmap").css("height",window.innerHeight-67);
                }

            }
        });
        });

	</script>

	<script src="//api.map.baidu.com/api?v=2.0&ak=AuNk3YS21DSmHEEvIFDf9dbD"></script>
    <script src="//api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js" type="text/javascript"></script>
    <script src="//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js" type="text/javascript"></script>
</html>
